<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane :label="item.name" :name="item.id.toString()" v-for="item in statusLine" :key="item.id"></el-tab-pane>
      </el-tabs>
        <div class="toplineBox-left mb-10">
<!--          <el-select v-model="searchForm.status" placeholder="请假状态" class="mr-5 w-100" size="small">-->
<!--            <el-option-->
<!--                v-for="item in statusLine"-->
<!--                :key="item.id"-->
<!--                :label="item.name"-->
<!--                :value="item.id">-->
<!--            </el-option>-->
<!--          </el-select>-->
          <el-select v-model="searchForm.type" placeholder="请选择时间类型" class="mr-5 w-200" size="small">
            <el-option
                v-for="item in typeLine"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
          <el-select v-model="searchForm.is_substitute" placeholder="选择是否代班" class="mr-5 w-200" size="small">
            <el-option
                v-for="item in substitute"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
          <el-date-picker
              v-model="timeData"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              size="small"
              class="mr-5">
          </el-date-picker>
          <el-button @click="searchFn(1)" plain type="primary" size="small">搜索
          </el-button>
          <el-button @click="searchFn(2)" plain size="small">重置
          </el-button>
        </div>
        <div class="toplineBox-left mb-10">
          <el-button @click.native="detailId=0,addVisible=true" size="small" type="primary" plain>新增请假单</el-button>
        </div>
      <!--本体列表，数据 -->
      <div class="">
        <el-table
            ref="multipleTable"
            :data="arryList"
            :stripe="tableStripe"
            :border="tableBorder"
            tooltip-effect="dark"
            style="width: 100%"
            header-cell-class-name="table-text-c"
            cell-class-name="table-text-c">
<!--          <el-table-column-->
<!--              label="ID"-->
<!--              align="center"-->
<!--              prop="id"-->
<!--              width="80"-->
<!--              :key="1"-->
<!--          >-->
<!--          </el-table-column>-->
          <el-table-column
              prop="pic"
              label="申请人"
              align="center"
              width="100"
              v-if="Number(activeName)==7"
              :show-overflow-tooltip="true"
              :key="2"
          >
            <template slot-scope="scope">
              {{ scope.row.user ? scope.row.user.realname : '' }}
            </template>
          </el-table-column>
          <el-table-column
              prop="pic"
              label="请假类型"
              align="center"
              width="90"
              :key="3"
          >
            <template slot-scope="scope">
              {{ scope.row.cate ? scope.row.cate.name : '' }}
            </template>
          </el-table-column>
          <el-table-column
              prop="pic"
              label="请假时间"
              align="center"
              width="320"
              :key="4"
          >
            <template slot-scope="scope">
              {{ scope.row.start_time }}至{{ scope.row.end_time }}
            </template>
          </el-table-column>
          <el-table-column
              prop="day"
              label="时长"
              align="center"
              width="90"
              :key="5"
          >
            <template slot-scope="scope">
              {{scope.row.day}}{{ scope.row.cate.time_type==2?'小时':'天' }}
            </template>
          </el-table-column>
          <el-table-column
              label="申请时间"
              align="center"
              width="160"
              :key="6"
          >
            <template slot-scope="scope">
              {{ scope.row.create_time || '' }}
            </template>
          </el-table-column>
          <el-table-column
              label="审批人"
              align="center"
              :key="7"
          >
            <template slot-scope="scope">
              {{ scope.row.examine_user?scope.row.examine_user.realname:'--' }}
            </template>
          </el-table-column>
          <el-table-column
              label="审批时间"
              align="center"
              width="160"
              :key="8"
          >
            <template slot-scope="scope">
              {{ scope.row.examine_time || '' }}
            </template>
          </el-table-column>
          <el-table-column
              prop="content"
              label="请假事由"
              align="center"
              :key="9"
          />
<!--          <el-table-column-->
<!--              prop="content"-->
<!--              label="签到记录"-->
<!--              align="center"-->
<!--          >-->
<!--            <template slot-scope="scope">-->
<!--              <el-popover-->
<!--                  placement="left-start"-->
<!--                  title="签到记录"-->
<!--                  width="180"-->
<!--                  v-if="scope.row.cate_id==1"-->
<!--                  trigger="click">-->
<!--                <div class="tableline">-->
<!--                  <div class="list" v-for="item in 10">-->
<!--                    <p>2022-10-0{{ item + 1 }}</p>-->
<!--                  </div>-->
<!--                </div>-->
<!--                <el-link slot="reference" type="primary">查看记录</el-link>-->
<!--              </el-popover>-->
<!--            </template>-->
<!--          </el-table-column>-->
          <el-table-column
              label="状态"
              align="center"
              width="80"
              :key="10"
          >
            <template slot-scope="scope">
              <span :style="{'color': statusLineColor[scope.row.status]}">{{statusLineState[scope.row.status]}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150" align="center" fixed="right" :key="11">
            <template slot-scope="scope">
              <el-button plain size="small" @click="detailId=scope.row.id,detailVisible=true">详情</el-button>
              <el-button plain type="danger" size="small" v-if="!scope.row.status && Number(activeName)!==7" @click="handleDetel(scope.row)">取消</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--工具条-->
      <el-col :span="24" class="toolbar">
        <el-pagination
            background
            layout="total, prev, pager, next"
            :total="page.total"
            :page-size="page.pagesize"
            @current-change="handleSizeChange">
        </el-pagination>
      </el-col>
    </div>
    <addUser :visible.sync="addVisible" @InitFn="InitFn"></addUser>
    <detailLeave :visible.sync="detailVisible" :detailId="detailId"></detailLeave>
  </div>
</template>

<script>
import {pagination} from '@/utils/util.js'
import addUser from "./addUser";
import {leaveIndex,leaveDelete} from '@/api/admin/staffService'
import detailLeave from "./detailLeave";
export default {
  components: {
    addUser,
    detailLeave
  },
  data() {
    return {
      activeName: 'all',
      detailVisible:false,
      detailId: 0,
      addVisible: false,
      tableStripe: true, // 是否斑马栏
      tableBorder: true, // 单元格右边边框
      arryList: [], // 数据列表
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      timeData: [],
      statusLineState: {
        0: '待审批',
        1: '通过',
        2: '驳回',
        3: '请假中',
        4: '已完成',
        5: '取消中',
        6: '已取消'
      },
      statusLineColor: {
        0: '#f44336',
        1: 'rgb(0 199 5)',
        2: '#f44336',
        3: 'rgb(207 122 0)',
        4: 'rgb(0 199 5)',
        5: '#f44336',
        6: 'rgb(0 199 5)',
      },
      substitute:[
        {
          id: 99,
          name: '全部'
        },
        {
          id: 0,
          name: '不需要代班'
        },
        {
          id: 1,
          name: '需要代班'
        },
      ],
      searchForm: {
        p: 1,
        style: 2, // 1 审核 2 我的
        type: null, // 1 今天 2 月 3 学期
        name: null,
        status: null,
        start_time: null,
        end_time: null,
        is_substitute: 99
      },
      statusLine: [
        {
          id: 'all',
          name: '全部'
        },
        {
          id: 0,
          name: '待审批'
        },
        {
          id: 1,
          name: '通过'
        },
        {
          id: 2,
          name: '驳回'
        },
        {
          id: 3,
          name: '请假中'
        },
        {
          id: 4,
          name: '已完成'
        },
        {
          id: 5,
          name: '取消中'
        },
        {
          id: 6,
          name: '已取消'
        },
        {
          id: 7,
          name: '抄送'
        }
      ],
      typeLine: [
        {
          id: 1,
          name: '今日'
        },
        {
          id: 2,
          name: '本月度'
        },
        {
          id: 3,
          name: '本学期'
        }
      ],
    }
  },
  watch:{
    activeName(){
      console.log('变了')
      this.searchFn(2)
    }
  },
  created() {
    this.InitFn()
  },
  methods: {
    // 初始化
    async InitFn() {
      let data_ = JSON.parse(JSON.stringify(this.searchForm))
      if(data_.is_substitute===99){
        delete data_.is_substitute
      }
      data_.p = this.page.pageindex
      leaveIndex(data_).then(res => {
        console.log('res:', res)
        // for (let item of res.list.data) {
        //   if(item.cate_id!==4){
        //
        //   }
        //   item.start_time = item.start_time.split(' ')[0]
        //   item.end_time = item.end_time.split(' ')[0]
        // }
        this.arryList = res.list.data
        this.page.total = res.list.total
      })
    },
    // index分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.InitFn()
    },
    adduser() {

    },
    searchFn(e) {
      console.log('this.activeName:', this.activeName)
      if(this.activeName!=='all'){
        if(Number(this.activeName)===7){
          this.searchForm.style = 3
          this.searchForm.status = null
        }else{
          this.searchForm.style = 2
          this.searchForm.status = this.activeName
        }
      }else{
        this.searchForm.style = 2
        this.searchForm.status = null
      }
      // e 1 搜索 2 重置
      if (e === 2) {
        this.timeData = ''
        this.searchForm.type = null
        this.searchForm.name = null

      } else {
        this.searchForm.start_tiem = this.timeData ? this.timeData[0] : null
        this.searchForm.end_time = this.timeData ? this.timeData[1] : null
      }
      this.page.pageindex = 1
      this.InitFn()
    },
    handleDetel(item) {
      this.$confirm('确认取消该申请并删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.detelRespon(item)
      }).catch(() => {
      })
    },
    detelRespon(item) {
      leaveDelete({id: item.id}).then(res => {
        console.log('res:', res)
        if(!res.code){
          this.$message.success(res.msg)
          this.InitFn()
        }else{
          this.$message.error(res.msg)
        }
      })
    }
  },
  mounted() {
  }
}
</script>


